<template>
  <div id="backcont">
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">KING 后台管理系统</div>

        <div class="form-group">
          <div class="input-label">账号</div>
          <el-input
              v-model="userName"
              placeholder="请输入账号"
              class="login-input"
              size="medium"
          ></el-input>
        </div>

        <div class="form-group">
          <div class="input-label">密码</div>
          <el-input
              v-model="password"
              placeholder="请输入密码"
              show-password
              class="login-input"
              size="medium"
          ></el-input>
        </div>

        <el-button
            type="primary"
            class="login-button"
            @click="signin()"
            :loading="load"
            :disabled="load"
        >
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default{
	data() {
		return {
			regi:'注册',
			load:false,
			userName: '',
			password:''
		}
	},
	methods:{
		// 登录
		async signin(){
		  if(this.userName==''){
        new this.mytitle(this.$message,'warning','请输入用户名！').funtitle()
        return;
      }
      if(this.password==''){
        new this.mytitle(this.$message,'warning','请输入密码！').funtitle()
        return;
      }
			this.load = true
			let obj = {userName:this.userName,password:this.password}
			try{
				let res = await new this.Request(this.Urls.m().login,obj).modepost()
        console.log("await new this.Request(this.Urls.m().login,obj).modepost() 的返回值"+res)
				if(res.data.code != 0){
					new this.mytitle(this.$message,'warning','用户名或者密码错误！').funtitle()
				}else{
					let ids = '1'
          console.log("token:"+res.data.token)
					localStorage.setItem("nuvmenuid", JSON.stringify(ids))
					localStorage.setItem("token", res.data.token)
          localStorage.setItem("currentUser", JSON.stringify(res.data.resultAdmin))
          this.$router.push({name:'index'})
				}
				this.load = false
			}catch(e){
				console.log(e)
				this.load = false
				new this.mytitle(this.$message,'info','发生错误,重试').funtitle()
			}
		}
	}
}
</script>

<style scoped>
#backcont {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 500px;
}

.login-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 40px 30px;
}

.login-header {
  text-align: center;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.form-group {
  margin-bottom: 25px;
}

.input-label {
  color: #606266;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}

.login-input {
  width: 100%;
}

.login-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  margin-top: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.login-button:hover {
  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.4);
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-card {
    padding: 30px 20px;
  }

  .login-header {
    font-size: 20px;
  }
}
</style>
